window.addEventListener('DOMContentLoaded', function() {
	/* // 电梯导航
	var double11 = document.querySelector('.tmall_doublbeeleven').offsetTop;
	var tmShop = document.querySelector('.product00').offsetTop;
	var cool = document.querySelector('.shopping_title12').offsetTop;
	var footer = document.querySelector('footer').offsetTop;
	var leftMenu = document.querySelector('.left_menu');
	var beatiful = document.querySelector('.shopping_title11').offsetTop;
	var tmInternational = document.querySelector('.product01').offsetTop;
	var lis = leftMenu.children[0].children;
	// console.log(lis);
	var all = [, double11, tmShop, tmInternational, beatiful, cool, footer];
	var lisColor = [, '#f92d48', '#64C333', '#000000', '#EA5F8D', '#0AA6E8', '#19C8A9', '#ff0036'];

	for (var i = 1; i < lis.length; i++) {
		lis[i].setAttribute('data-index', i);
		lis[i].addEventListener('click', function() {

			var index = this.getAttribute('data-index');
			window.scroll(0,all[index] + 1);
			// animateCol(window, all[index] + 10);

		})

		lis[i].addEventListener('mouseover', function() {
			var index = this.getAttribute('data-index');
			// console.log(index);
			this.style.backgroundColor = lisColor[index];

		})
		lis[i].addEventListener('mouseout', function() {

			this.style.backgroundColor = '';

		})

	}

	var menuDistence = leftMenu.offsetTop - double11;
	window.addEventListener('scroll', function() {
		// console.log(menuDistence,leftMenu.offsetTop);
		var menuY = window.pageYOffset;
		// console.log(menuY,double11);
		if (menuY >= double11) {
			leftMenu.style.position = 'fixed';
			leftMenu.style.top = menuDistence + 'px';
			lis[7].style.display = 'block';
		} else {
			leftMenu.style.position = 'absolute';
			leftMenu.style.top = '1000px';
			lis[7].style.display = 'none';
		}

		for (var i = 1; i < all.length; i++) {
			for (var j = 1; j < lisColor.length; j++) {
				if (menuY >= all[i]) {
					lis[i].style.backgroundColor = lisColor[i];
					lis[j].style.backgroundColor = '';
				} else {
					lis[i].style.backgroundColor = '';
				}
			}
		}

	}) */



	// 轮播图
	// 1. 鼠标经过focus时 左右按钮显示隐藏
	var arrow = document.querySelector('.arrow');
	var arrow_l = arrow.querySelector('.arrow_left');
	var arrow_r = arrow.querySelector('.arrow_right');
	var focus = document.querySelector('.main_focus');
	//获取焦点图的宽度
	var focusImgWidth = focus.offsetWidth;
	// 获取ul ol
	var ul = focus.querySelector('ul');
	var ol = focus.querySelector('ol');
	// 声明一个全局的circle变量
	var circle = 0;
	// 声明右侧按钮的变量
	var num = 0;

	focus.addEventListener('mouseover', function() {
		arrow_l.style.display = 'block';
		arrow_r.style.display = 'block';
		clearInterval(timer);
	})
	focus.addEventListener('mouseout', function() {
		arrow_l.style.display = 'none';
		arrow_r.style.display = 'none';
		timer = setInterval(function() {
			// 手动调用右侧按钮点击事件
			arrow_r.click();
		}, 3000)
	})
	// 循环实现小圆圈跟随图片的个数 并且添加点击事件
	for (var i = 0; i < ul.children.length; i++) {
		var li = document.createElement('li');
		li.setAttribute('data-index', i);
		ol.appendChild(li);
		li.addEventListener('mouseover', function() {
			// 干掉其他人
			for (var i = 0; i < ol.children.length; i++) {
				ol.children[i].className = '';
			}
			// 留下我自己
			this.className = 'current';
			// 获取ol中li 的 自定义属性
			var index = this.getAttribute('data-index');
			// console.log(index);
			// ul.style.left = -index * focusImgWidth + 'px';
			animate(ul, -index * focusImgWidth, 10);
			// circle = index;
			// num = index;
			num = circle = index;

		})
	}
	ol.children[0].className = 'current';
	//  克隆ul的第一个li
	/* var first = ul.children[0].cloneNode(true);
	ul.appendChild(first); */

	// 右侧点击按钮
	arrow_r.addEventListener('click', function() {

		if (num == ul.children.length - 1) {
			num = -1;
			ul.style.left = 0;
		}
		num++;
		animate(ul, -num * focusImgWidth, 10);
		circle++;
		if (circle == ol.children.length) {
			circle = 0;
		}

		for (var i = 0; i < ol.children.length; i++) {
			ol.children[i].className = '';
		}
		ol.children[circle].className = 'current';

	})
	// 左侧点击按钮
	arrow_l.addEventListener('click', function() {

		if (num == 0) {
			num = ul.children.length - 1;
			ul.style.left = -num * focusImgWidth + 'px';
		}
		num--;
		animate(ul, -num * focusImgWidth, 10);

		if (circle == 0) {
			circle = ol.children.length;
		}
		circle--;
		for (var i = 0; i < ol.children.length; i++) {
			ol.children[i].className = '';
		}
		ol.children[circle].className = 'current';

	})

	// 轮播图自动播放功能
	var timer = setInterval(function() {
		// 手动调用右侧按钮点击事件
		arrow_r.click();
	}, 3000)


	// 首页选项卡
	/* var navClick = document.querySelector('.nav_left').children;
	var common = document.querySelectorAll('.comm');
	
	for (var i = 0; i < navClick.length; i++) {
		navClick[i].setAttribute('data-index',i);
		navClick[i].addEventListener('click',function(){
			
			for (var i = 0; i < navClick.length; i++) {
				navClick[i].className = '';
			}
			this.className = 'nav_left1';
			
			var index = this.getAttribute('data-index');
			for (var j = 0; j < common.length; j++) {
				common[j].style.display = 'none';
			}
			common[index].style.display = 'block';
		})
	}
	
	var women = document.querySelector('.women');
	var hiddenMore = document.querySelector('.hid');
	
	women.addEventListener('mouseover',function(){
		
		hiddenMore.style.display = 'block';
		hiddenMore.addEventListener('mouseover',function(){
			this.style.display = 'block';
		})
		hiddenMore.addEventListener('mouseout',function(){
			this.style.display = 'none';
		})
		
	})
	
	women.addEventListener('mouseout',function(){
		
		hiddenMore.style.display = 'none';
		
	}) */
	
	
	/*{ // 轮播图
	        // 1. 鼠标经过focus时 左右按钮显示隐藏
	        var arrow = document.querySelector('.arrow');
	        console.log(arrow);
	
	        var arrow_l = arrow.querySelector('.arrow_left');
	        var arrow_r = arrow.querySelector('.arrow_right');
	        var focus = document.querySelector('.main_focus');
	        //获取焦点图的宽度
	        var focusImgWidth = focus.offsetWidth;
	        // 获取ul ol
	        var ul = focus.querySelector('ul');
	        var ol = focus.querySelector('ol');
	        // 声明一个全局的circle变量
	        var circle = 0;
	        // 声明右侧按钮的变量
	        var num = 0;
	
	        focus.addEventListener('mouseover', function() {
	            arrow_l.style.display = 'block';
	            arrow_r.style.display = 'block';
	            clearInterval(timer);
	        })
	        focus.addEventListener('mouseout', function() {
	                arrow_l.style.display = 'none';
	                arrow_r.style.display = 'none';
	                timer = setInterval(function() {
	                    // 手动调用右侧按钮点击事件
	                    arrow_r.click();
	                }, 1000)
	            })
	            // 循环实现小圆圈跟随图片的个数 并且添加点击事件
	        for (var i = 0; i < ul.children.length; i++) {
	            var li = document.createElement('li');
	            li.setAttribute('data-index', i);
	            ol.appendChild(li);
	            li.addEventListener('click', function() {
	                // 干掉其他人
	                for (var i = 0; i < ol.children.length; i++) {
	                    ol.children[i].className = '';
	                }
	                // 留下我自己
	                this.className = 'current';
	                // 获取ol中li 的 自定义属性
	                var index = this.getAttribute('data-index');
	                // console.log(index);
	                // ul.style.left = -index * focusImgWidth + 'px';
	                animate(ul, -index * focusImgWidth, 10);
	                // circle = index;
	                // num = index;
	                num = circle = index;
	
	            })
	        }
	        ol.children[0].className = 'current';
	        //  克隆ul的第一个li
	        var first = ul.children[0].cloneNode(true);
	        ul.appendChild(first);
	        //节流阀 
	        // 在全局中声明一个 flag变量 
	        var flag = true;
	        // 右侧点击按钮
	        arrow_r.addEventListener('click', function() {
	
	                if (flag) {
	                    // 事件触发后将flag为假
	                    flag = false;
	                    if (num == ul.children.length - 1) {
	                        num = 0;
	                        ul.style.left = 0;
	                    }
	                    num++;
	                    animate(ul, -num * focusImgWidth, 20, function() {
	                        flag = true;
	                    });
	                    circle++;
	                    if (circle == ol.children.length) {
	                        circle = 0;
	                    }
	
	                    for (var i = 0; i < ol.children.length; i++) {
	                        ol.children[i].className = '';
	                    }
	                    ol.children[circle].className = 'current';
	                }
	
	            })
	            // 左侧点击按钮
	        arrow_l.addEventListener('click', function() {
	
	            if (flag) {
	                flag = false;
	                if (num == 0) {
	                    num = ul.children.length - 1;
	                    ul.style.left = -num * focusImgWidth + 'px';
	                }
	                num--;
	                animate(ul, -num * focusImgWidth, 20, function() {
	                    flag = true;
	                });
	
	                if (circle == 0) {
	                    circle = ol.children.length;
	                }
	                circle--;
	                for (var i = 0; i < ol.children.length; i++) {
	                    ol.children[i].className = '';
	                }
	                ol.children[circle].className = 'current';
	            }
	
	        })
	
	        // 轮播图自动播放功能
	        var timer = setInterval(function() {
	            // 手动调用右侧按钮点击事件
	            arrow_r.click();
	        }, 2000)
	    }*/

})